<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
	<link rel="stylesheet" href="../../include/css/public.min.css">
	<link rel="stylesheet" href="../../include/css/iconfont.min.css">
	<link rel="stylesheet" href="../doc-lib/solarized-light.css">
	<link rel="stylesheet" href="../doc-lib/doc.css">
</head>
<body>
    <div class="page-cont">
		<div class="crumb"></div>
		<div class="page-title">
			<h2>表格</h2>
			<p>表格用于展示列表形式的数据，如日志、报表等。</p>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 表格结构</h4>
			<div class="section-cont">
				<div class="grid-row">
					<div class="grid-col grid-col-3"><strong>名称</strong></div>
					<div class="grid-col grid-col-9"><strong>描述</strong></div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						表头
					</div>
					<div class="grid-col grid-col-9">
						表头一般是表格的第一行，用于描述表格中每一列数据的名称。在垂直显示一组数据的表格中，表头也可以是垂直的第一列。<br>
						表头内容一般使用 <code>&lt;th&gt;</code> 标签来包裹。
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						表体
					</div>
					<div class="grid-col grid-col-9">
						表体就是表格的内容部分，内容在表体的单元格内，内容可以是文字、图片或其他控件（如文本框、按钮等）。
					</div>
				</div>
				<div class="grid-row mt05">
					<div class="grid-col grid-col-7">
						<table class="table" id="demo_tableBasic"></table>
					</div>
					<div class="grid-col grid-col-5">
<pre class="ml10"><code class="html">&lt;table class="table"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;表头第1列&lt;/th&gt;
            &lt;th&gt;表头第2列&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;单元格1行1列&lt;/td&gt;
            &lt;td&gt;单元格1行2列&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;单元格2行1列&lt;/td&gt;
            &lt;td&gt;单元格2行2列&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
					</div>
				</div>
			</div>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 隔行交替样式</h4>
			<div class="section-cont">
				<p>表格的隔行交替样式能明显提升表格的视觉识别效率，也使得表格更加美观。推荐为内容较长的表格应用该效果，为表格加上 <code>.table-striped</code> 样式即可。</p>
				<p><strong>注：</strong>IE9 以下的 IE 浏览器无效。</p>
				<div class="grid-row">
					<div class="grid-col grid-col-7">
						<table class="table table-striped"></table>
					</div>
					<div class="grid-col grid-col-5">
<pre class="ml10"><code class="html">&lt;table class="table table-striped"&gt;
...
&lt;/table&gt;</code></pre>
					</div>
				</div>
			</div>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 响应鼠标悬停</h4>
			<div class="section-cont">
				<p>为表格加上 <code>.table-hover</code> 样式，即可实现鼠标悬停时所在行高亮的效果。该效果能形成视觉辅助，方便地查看同一行的内容。</p>
				<div class="grid-row">
					<div class="grid-col grid-col-7">
						<table class="table table-hover"></table>
					</div>
					<div class="grid-col grid-col-5">
<pre class="ml10"><code class="html">&lt;table class="table table-hover"&gt;
...
&lt;/table&gt;</code></pre>
					</div>
				</div>
			</div>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 表格边框</h4>
			<div class="section-cont">
				<p>1. 水平边框样式 <code>.table-border-hor</code></p>
				<div class="grid-row">
					<div class="grid-col grid-col-7">
						<table class="table table-border-hor"></table>
					</div>
					<div class="grid-col grid-col-5">
<pre class="ml10"><code class="html">&lt;table class="table table-border-hor"&gt;
...
&lt;/table&gt;</code></pre>
					</div>
				</div>
				<p class="mt15">2. 无边框样式 <code>.table-border-none</code></p>
				<div class="grid-row">
					<div class="grid-col grid-col-7">
						<table class="table table-border-none"></table>
					</div>
					<div class="grid-col grid-col-5">
<pre class="ml10"><code class="html">&lt;table class="table table-border-none"&gt;
...
&lt;/table&gt;</code></pre>
					</div>
				</div>
			</div>
		</div>
    </div>
    <script src="../../include/js/jquery-1.11.3.min.js"></script>
    <script src="../../include/js/public.min.js"></script>
	<script src="../doc-lib/highlight.pack.js"></script>
	<script src="../doc-lib/doc.js"></script>
    <script>
		hljs.initHighlightingOnLoad();

		/**
		 * 构建表格
		 * @param {number} rows - 行数
		 * @param {number} cols - 列数
		 */
		function buildTable(rows, cols) {
			var text = {
				col: '表头第{col}列',
				row: '单元格{row}行{col}列'
			};

			var thead = '',
				tbody = '';

			for (var i = 1; i < rows + 1; i++) {
				if (i === 1) {
					thead = '<tr>';
				}

				tbody += '<tr>';

				for (var j = 1; j < cols + 1; j++) {
					var tdTxt = text.row.replace('{row}', i);
					tdTxt = tdTxt.replace('{col}', j);

					if (i === 1) {
						thead += '<th>' + (text.col.replace('{col}', j)) + '</th>';
					}

					tbody += '<td>' + tdTxt + '</td>';
				}

				if (i === 1) {
					thead += '</tr>';
				}

				tbody += '</tr>';
			}

			return '<thead>' + thead + '</thead>'
				 + '<tbody>' + tbody + '</tbody>';
		}

		$('.table').eq(0).html(buildTable(2, 2));
		$('.table-striped').html(buildTable(6, 4));
		$('.table-hover').html(buildTable(6, 4));
		$('.table-border-hor').html(buildTable(4, 4));
		$('.table-border-none').html(buildTable(4, 4));
    </script>
</body>
</html>
